<template>
	<van-popup v-model="dialogVisible"
	v-if="dialogVisible"
	style="height: 100vh;width: 100vw;"
	v-loading="loading"
		>
		<div style="height:100%;width: 100%;color: #000; ">
			<!-- <van-icon name="cross" /> -->
			<!-- <div v-if="isUse" style="padding: 5px 6px;background-color:#166AFF ;color: #fff;font-size: 14px;position: absolute;top: 10px;left: 20px;z-index: 9999999;border-radius: 12px;" @click="changeCamera">旋转镜头</div> -->
			<!-- <p style="padding: 12px 20px;background-color:#166AFF ;color: #fff;" v-show="exact!='user'">摄像头后置:开</p> -->
			<i class="el-icon-close" @click="dialogVisible=false"> <span style="font-size: 16px;">关闭</span> </i>
			<div class="canvasBox" v-show='isUse'>
				<!-- handlerTrach v-if='isUseTorch'-->
				<div class="trachBox" @click='changeCamera'
					>
					<span class="shutter">翻转</span>
					<!-- trackStatus -->
					<!-- <span v-if="trackStatus">灯光:开</span>
					<span v-else>灯光:关</span> -->
					<!-- <svg v-if="trackStatus" t="1677469437625" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3440" width="25" height="25"><path d="M651.353043 550.479503H378.752795L240.862609 364.315031c-3.688944-4.897391-5.660621-10.876025-5.660621-17.045466v-60.040745c0-15.773416 12.847702-28.621118 28.621118-28.621118h502.459627c15.773416 0 28.621118 12.847702 28.621118 28.621118v59.977143c0 6.105839-1.971677 12.084472-5.660621 17.045466l-137.890187 186.228074zM378.752795 598.308571v398.024348c0 15.328199 12.402484 27.667081 27.667081 27.667081h217.266087c15.328199 0 27.667081-12.402484 27.66708-27.667081V598.308571H378.752795z m136.300124 176.942112c-14.564969 0-26.331429-11.76646-26.331428-26.331428v-81.283975c0-14.564969 11.76646-26.331429 26.331428-26.331429 14.564969 0 26.331429 11.76646 26.331429 26.331429v81.283975c0 14.564969-11.76646 26.331429-26.331429 26.331428zM512 222.608696c-17.554286 0-31.801242-14.246957-31.801242-31.801243V31.801242c0-17.554286 14.246957-31.801242 31.801242-31.801242s31.801242 14.246957 31.801242 31.801242v159.006211c0 17.554286-14.246957 31.801242-31.801242 31.801243zM280.932174 205.881242c-9.47677 0-18.889938-4.197764-25.122981-12.275279L158.242981 67.991056a31.864845 31.864845 0 0 1 5.597019-44.648944 31.864845 31.864845 0 0 1 44.648944 5.597018l97.502609 125.551305a31.864845 31.864845 0 0 1-5.597019 44.648944c-5.787826 4.579379-12.656894 6.741863-19.46236 6.741863zM723.987081 205.881242c-6.805466 0-13.674534-2.162484-19.462361-6.678261a31.794882 31.794882 0 0 1-5.597018-44.648944l97.566211-125.551304a31.794882 31.794882 0 0 1 44.648944-5.597019 31.794882 31.794882 0 0 1 5.597019 44.648944l-97.566211 125.551305c-6.360248 8.077516-15.709814 12.27528-25.186584 12.275279z" fill="#032CDD" p-id="3441"></path></svg>
					<svg v-else t="1677469601845" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4011" id="mx_n_1677469601848" width="25" height="25"><path d="M665.024 547.52H390.72L251.968 360.192c-3.712-4.928-5.696-10.944-5.696-17.152v-60.416c0-15.872 12.928-28.8 28.8-28.8h505.6c15.872 0 28.8 12.928 28.8 28.8v60.352c0 6.144-1.984 12.16-5.696 17.152l-138.752 187.392zM390.72 595.648v400.512c0 15.424 12.48 27.84 27.84 27.84h218.624c15.424 0 27.84-12.48 27.84-27.84V595.648H390.72z m137.152 178.048c-14.656 0-26.496-11.84-26.496-26.496v-81.792c0-14.656 11.84-26.496 26.496-26.496 14.656 0 26.496 11.84 26.496 26.496v81.792c0 14.656-11.84 26.496-26.496 26.496z" fill="#707070" p-id="4012"></path></svg> -->
					<!-- <img src="./track.svg" class='trach'> -->
				</div>
				<div class="shutterBox" @click='hanlderShutter' hover-class="avtive">
					<!-- <div class="shutter el-icon-camera-solid" ></div> -->
					<span class="shutter">拍照</span>
				</div>
				<input type="file" style="display: none;" ref="inputPhone" accept="image/*" @change.stop="openPhoto" v-if="!this.cropParams.src">
				<div class="PhotoBox" @click="openPictrue">
					<!-- <div class="el-icon-picture">
					</div> -->
					<span class="shutter">图库</span>
				</div>
				<div class="vivwBox">
					<div class="title" style="padding-top: 30px;font-size: 18px;font-weight: 600;">
						<span v-show="options.field_id=='id_card_photo'">
							请将证件人像面放置扫描框内
						</span>
						<span v-show="options.field_id=='id_card_emblem'">
							请将证件国徽面放置扫描框内
						</span>
						<span v-show="options.field_id=='photo'">
							请拍摄本人正面免冠照片
						</span>
						<span v-show="options.field_id!='id_card_photo'&&options.field_id!='id_card_emblem'&&options.field_id!='photo'">
							请拍摄
						</span>
					</div>
					<div class="boxBorder"></div>
					<div v-show="options.field_id=='id_card_photo'" :style="`position: absolute;top: 77px;z-index:999;left: 0;width: ${windowWidth}px;height:`+windowHeight+`px;background:url(${require('@/assets/mobile/sfzzm.png')});background-size: 100% 100%;`">

					</div>
					<div v-show="options.field_id=='id_card_emblem'" :style="`position: absolute;top: 77px;z-index:999;left: 0;width: ${windowWidth}px;height:`+windowHeight+`px;background:url(${require('@/assets/mobile/sfzghm.png')});background-size: 100% 100%;`">

					</div>
					<div v-show="options.field_id=='photo'" :style="`position: absolute;top: 77px;z-index:999;width: ${windowWidth}px;height:`+windowHeight+`px;background:url(${require('@/assets/mobile/rxm.png')});background-size: 100% 100%;`">

					</div>
					<div v-show="isphoto" style="background-color: #fff;height: 90%;width: 70%;position: absolute;top: 17%;left:15%;z-index: 999;border-radius: 8px;padding:16px;display: flex;flex-direction: column;">
						<p style="text-align: center;font-size: 20px;margin-bottom:16px">免冠照拍摄示例</p>
						<img v-if="options.defImg" :src="options.defImg.src" style="width: 100%;flex: 1;height: 74%;" alt="">
						<img v-else src="@/assets/mobile/sl.png" alt="" style="width: 100%;flex: 1;height: 74%;">
						<div style="width:100%;margin-top: 16px;text-align: center;color:#166AFF;font-size: 18px;" @click="()=>{this.isphoto=false}">
							知道了
						</div>
					</div>
					<div class="tipBox" v-show="options.field_id!='photo'">
						<div class="on1">注意事项：</div>
						<p v-for="item in options.msgs">{{ item }}</p>
					</div>
				</div>
				<simpleCrop class="photoEMS" :crop-params="cropParams" @crop="crop" @close="closeCallback" ref="SimpleCrop" v-if="isShowImgCard"></simpleCrop>
			</div>
			<div class="error" v-show='!isUse'>
				<div class="on1">相机未开启权限或无摄像头,请尝试如下操作:</div>
                <div>1. 点击拍照时允许摄像头开启；</div>
                <div>2. 关闭浏览器重新打开报名页面；</div>
				<div>3. 检查摄像头是否存在或正常工作；</div>
				<div style="
				position: absolute;
				bottom: 40px;
				"	>
					<div class="on1" style="margin-top:20px;">若持续异常请点击此处使用图库上传:</div>
					<div style="width: 80px;text-align: center;line-height: 35px;font-size: 18px;color: #fff;background-color: #166AFF;border-radius: 6px;"  @click="()=>{this.isphoto=false , this.openPictrue()}">
						图库
					</div>
				</div>
			</div>
		</div>
	</van-popup>
	
</template>
<script>
	import simpleCrop from "simple-crop/index.vue";
	import {aliasOCR,photoMake} from '@/api/apply.js';
	import {mapGetters} from 'vuex';
	export default {
		computed: {
			...mapGetters(["init", "http"]),
		},
		name:'mumuCamera',
		props: {
			// exact: {
			// 	type: String,
			// 	default: 'environment' // environment 后摄像头  user 前摄像头
			// },
			//水印
			watermark: {
				type: Array,
				default: () => []
			},
			show:{
				type:Boolean,
				default:false
			},
			options:{
				type: Object,
				default: () => {
					return {
						style:{
						},
						clip:1.58,
						msgs:[
							'1. 请拍摄或在相册中选择身份证头像面图片',
							'2. 证件信息必须无遮挡且清晰不模糊。',
							'3. 照片请勿上下、左右倒置或翻转；'
						],
						field_id:'id_card_photo',
						defImg:'',
					}
				}
			}
		},
		components:{simpleCrop},
		watch:{
			dialogVisible(val){
				this.$emit('update:show',val)
				if(val){
					// this.videoParam = {
					// 	audio: false,
					// 	video: {
					// 		facingMode: this.exact,
					// 		width:this.windowHeight,
					// 		height:this.windowWidth,
					// 	}
					// }
					// // this.$refs.SimpleCrop.hide()
					// if(this.options.field_id=='photo'){
					// 	this.isphoto=true
					// 	this.videoParam = {
					// 		audio: false,
					// 		video: {
					// 			facingMode: this.exact,
					// 			width:this.windowWidth,
					// 			height:this.windowHeight,
					// 		}
					// 	}
					// }
					this.create()
				}else{
					this.closeCamera()
				}
			},
			show(val){
				console.log(val,888);
				this.dialogVisible=val
			}
		},
		data() {
			return {
				isUse: true,


				isphoto:false,

				bg:require('@/assets/mobile/sfzzm.png'),
				exact:'environment',
				windowWidth: 0,
				windowHeight: 0,
				video: null,
				canvas: null,
				canvas2d: null,
				cameraCanvas: null,
				cameraCanvas2d: null,
				dialogVisible:this.show,
				isShowImgCard:false,//图片编辑
				loading:false,
				videoParam:{},

				mediaList:[],
				// 闪光灯
				track: null,
				isUseTorch: false,
				trackStatus: false,
				//  :visible="isShowImgCard"
				cropParams: {
					// title: "编辑图片(可以拖动边框改变截取图片大小)", //标题
					src: "", // 裁剪图片地址
					size: {
						// 裁剪尺寸
						width: 316,
						height: 200,
					},
					rotateSlider: false, //是否开启旋转刻度盘
					cropSizePercent: 1, //裁剪框显示比例
					borderWidth: 1, //裁剪框边框宽度
					funcBtns: ["close", "crop",'around', 'reset'], //功能按钮配置
					borderColor: "#fff", //裁剪框边框颜色
					coverColor: "rgba(0,0,0,.5)", //裁剪框遮罩颜色
					startAngle: -360, //旋转刻度盘开始角度
					endAngle: 360, //旋转刻度盘结束角度
				},
				url:location.href.includes('https')?'':'https'+ location.href.split('http')[1],
			}
		},
		// mounted(){
		// 	console.log(this.dialogVisible,'999');
		// },
		methods: {
			openScan() {
				let obj = {}
				let deviceId=''
				this.mediaList.map(item=>{
					if(item.deviceId&&item.deviceId!='default'){
						deviceId=item.deviceId
					}
				})
				if(this.options.field_id=='photo'){
					obj = {
						facingMode: this.exact,
						minwidth:this.windowHeight*8,
						minheight:this.windowWidth*8,
						
					}
					if(deviceId){
						obj = {
							facingMode: this.exact,
							minwidth:this.windowHeight*8,
							minheight:this.windowWidth*8,
							deviceId:deviceId
						}
					}
				}else{
					obj = {
						facingMode: this.exact,
						width:this.windowHeight*8,
						height:this.windowWidth*8,
					}
					if(deviceId){
						obj = {
							facingMode: this.exact,
							width:this.windowHeight*8,
							height:this.windowWidth*8,
							deviceId:deviceId
						}
					}
				}
				
				this.videoParam = {
					audio: false,
					video:obj
					// video:this.options.field_id=='photo'? {
					// 	facingMode: this.exact,
					// 	width:{
					// 		min:this.windowHeight*8,
					// 		ideal: 1080,
					// 	},
					// 	height:{
					// 		min:this.windowWidth*8,
					// 		ideal:2048 ,
					// 	},
					// }:{
					// 	facingMode: this.exact,
					// 	width:this.windowHeight*8,
					// 	height:this.windowWidth*8,
						
					// }
					// video:{
					// 		facingMode: this.exact,
					// 		width:this.windowHeight*6*1.7,
					// 		height:this.windowWidth*6,
					// }
					// video:{
					// 	facingMode: this.exact,
					// 	width:{
					// 		min:this.windowHeight*1.7,
					// 	},
					// 	height:{
					// 		min:this.windowHeight
					// 	}
					// }
				}
				if(this.exact=='user'){
					this.video.style.transform='rotateY(-180deg)'
					
				}else{
					this.video.style.transform = ''
					// videoParam.video.width = width
					// videoParam.video.height = height
				}
				console.log(obj,'09998888');
				console.log(deviceId,'145676sssss');
				this.cameraCanvas2d.scale(4,4)
				navigator.mediaDevices.getUserMedia(this.videoParam).then((stream) => {
					if(this.mediaList.length==0){
						navigator.mediaDevices.enumerateDevices().then((devices) => {
							this.mediaList = devices
							this.dialogVisible=false
							// console.log(devices.filter(item=>item.label), '-----enumerateDevices------');
						});
					}
					this.isUse = true
					this.video.srcObject = stream
					this.video.setAttribute('playsinline', true)
					this.video.setAttribute('webkit-playsinline', true)
					this.video.play()
					// this.makeWatermark(this.canvas2d)

					this.track = stream.getVideoTracks()[0];
					setTimeout(() => {
						this.isUseTorch = this.track.getCapabilities().torch || null
					}, 500)
				}).catch((err) => {
					// this.$toast.fail("设备无摄像头或不支持");
					// console.error('设备不支持', err);
					this.isUse = false
				})
			},

			async makeWatermark(ctx2d) {
				if (this.watermark.length === 0) return
				for (let item of this.watermark) {
					switch (item.type) {
						case 'img':
							const [getImgErr, { path: imgPath }] = await uni.getImageInfo({
								src: item.url
							});
							if (getImgErr) throw item.url + '没有找到'
							const img = await this.getImg(imgPath)
							ctx2d.drawImage(img, item.x, item.y, item.w, item.h)

							break;
						case 'text':
							const color = item.font_color || "#000"
							const fontSize = item.font_size || 16

							ctx2d.fillStyle = color
							ctx2d.font = `${fontSize}px normal`
							ctx2d.fillText(item.text, item.x, item.y)
							break;
					}

				}
			},

			getImg(path) {
				return new Promise((resolve, reject) => {
					const img = new Image()
					img.src = path
					img.onload = (res) => {
						resolve(img)
					}
				})
			},


			transtion(number) {
				return number * 2
			},

			// 快门
			async hanlderShutter() {
				let setting = JSON.parse(this.init.setting);
				if(this.isphoto){
					return this.$toast.fail('请点击"知道了"关闭提醒框后操作!')
				}
				// this.$refs.SimpleCrop.show()
				// this.cameraCanvas2d.clearRect(0, 0, this.windowWidth*4, this.windowHeight*4)
				
				if(this.exact=='user'){
					this.cameraCanvas2d.translate( this.windowWidth, 0);
					this.cameraCanvas2d.scale(-1, 1); //左右镜像翻转
				}else{
					this.cameraCanvas2d.translate( 0, 0);
					this.cameraCanvas2d.scale(1, 1); //左右镜像翻转
				}
				// this.cameraCanvas2d.setTransform(4, 0, 0, 4, 0, 0);
				this.cameraCanvas2d.drawImage(this.video, 0, 0, this.windowWidth, this.windowHeight)
				// await this.makeWatermark(this.cameraCanvas2d)
				const img = this.cameraCanvas.toDataURL('image/png')
				
				if(setting.backgroundPhoto=='高级'&&this.options.field_id=='photo'){
					this.loading=true
					await photoMake({
					url:img,
					bk:'#ffffff',
					spec:1, //一寸 1 二寸 4
					}).then(res=>{
						this.loading=false
						if(res.code==200){
						this.cropParams.src = res.data.result
						// let url = res.data.result
						// if(process.env.NODE_ENV === 'development'){
						// 	url = '/photoMake'+res.data.result.split('https://oapi.aisegment.com')[1]
						// }else{
						// 	url = res.data.result
						// }
						this.isShowImgCard=true
						}else{
							this.$toast.fail(res.msg)
						}
					})
				}else{
					this.cropParams.src = img
					this.isShowImgCard=true
				}
				this.$forceUpdate()
				this.$nextTick(()=>{
					document.getElementsByClassName('crop-whole-cover')[0].className  ='crop-whole-cover photoEMS'
					this.$refs.SimpleCrop._instance.$resetBtn.click()
				})
				
			},
			handlerTrach() {
				this.trackStatus = !this.trackStatus
				this.track.applyConstraints({
					advanced: [{ torch: this.trackStatus }]
				})
			},

			closeCamera() {
				
				// for(item in document.getElementsByClassName('crop-whole-cover')){
				// 	if(document.getElementsByClassName('crop-whole-cover')[item].style){
				// 		document.body.removeChild(document.getElementsByClassName('crop-whole-cover')[item])
				// 	}
				// }
				// console.log(document.getElementsByClassName('vivwBox')[0],this.canvas);
				// this.canvas.remove()
				// this.cameraCanvas.remove()
				// document.getElementsByClassName('vivwBox')[0]
				// document.getElementById('canvas').remove()
				// this.video.remove()
				// document.getElementsByClassName('vivwBox')[0].removeChild(this.cameraCanvas)
				if (this.video&&this.video.srcObject) {
					this.video.srcObject.getTracks().forEach((track) => {
						track.stop()
					})
				}
			},
			//启动
			async create() {
				// this.isUse = false
				await navigator.mediaDevices.enumerateDevices().then((devices) => {
					this.mediaList = devices
					// console.log(devices.filter(item=>item.label), '-----enumerateDevices------');
				});
				console.log(this.mediaList,'eee');
				this.isShowImgCard=false
				this.cropParams = JSON.parse(JSON.stringify(this.cropParams))
				if(this.options.field_id!='photo'){
					this.windowWidth = document.documentElement.clientWidth || document.body.clientWidth
					this.windowHeight = document.documentElement.clientWidth * this.options.clip
				}else{
					// this.windowWidth = this.options.style.width *0.8
					// this.windowHeight =this.options.style.height*0.8
					this.windowWidth = document.documentElement.clientWidth * 0.8
					this.windowHeight = this.windowWidth * this.options.clip
				}
				this.cropParams.size = {
					width: this.windowWidth*2,
					height: this.windowHeight*2,
				}
				this.$nextTick(() => {
					this.video = document.createElement('video')
					this.video.width = this.windowWidth
					this.video.height = this.windowHeight
					this.video.playsinline = true
					this.video.style=`position:relative;top:20px;left:0;right:0;margin:auto;height:${this.windowHeight}px;width:${this.windowWidth}px;`
					const canvas = document.createElement('canvas')
					this.canvas = canvas
					canvas.id = 'canvas'
					canvas.width = this.windowWidth
					canvas.height = this.windowHeight
					canvas.style = 'position: fixed;top:70px;left: 0;z-index:5;'
					this.canvas2d = canvas.getContext('2d')

					// 设置当前宽高 满屏
					const canvasBox = document.getElementsByClassName('vivwBox')[0]
					canvasBox.append(this.video)
					canvasBox.append(canvas)
					canvasBox.style = `width:100%;`

					const cameraCanvas = document.createElement('canvas')
					this.cameraCanvas = cameraCanvas
					cameraCanvas.id = 'cameraCanvas'
					cameraCanvas.width = this.windowWidth * 4
					cameraCanvas.height = this.windowHeight * 4
					cameraCanvas.style = `display:none;height:${this.windowHeight};width:${this.windowWidth};`
					this.cameraCanvas2d = cameraCanvas.getContext('2d')
					// canvasBox.append(cameraCanvas)

					this.openScan()
				})
			},
			//剪辑图片
			crop(data) {
				// this.loading=true
				this.$emit('success', {
					url:data.toDataURL(),
					field_id:this.options.field_id
				})
				
				this.isShowImgCard = false
				this.dialogVisible = false
				this.cropParams.src=''
				// this.asrsc = data.toDataURL();
				// let file = dataURLtoFile(data.toDataURL());
				// this.pearit.fileList = [
				// 	{
				// 	url: data.toDataURL(),
				// 	name: "",
				// 	},
				// ];
				// let srt = "img" + this.pearit.field_id;
				// if (this.$refs[srt][0]) {
				// 	this.$refs[srt][0].uploadImg(file);
				// } else {
				// 	this.$refs[srt].uploadImg(file);
				// }
				// console.log()
			},
			closeCallback(){
				window.ontouchmove = null
				window.ontouchstart = null
				window.removeEventListener('touchstart',()=>{})
				window.removeEventListener('ontouchmove',()=>{})
				if(document.getElementsByClassName('crop-whole-cover')&&document.getElementsByClassName('crop-whole-cover')[0]){
					document.body.removeChild(document.getElementsByClassName('crop-whole-cover')[0])
				}
				this.cropParams.src=''
				this.isShowImgCard=false
				// setTimeout(()=>{this.isShowImgCard=false},500)
			},
			openPictrue(){
				if(this.isphoto){
					return this.$toast.fail('请点击"知道了"关闭提醒框后操作!')
				}
				this.$refs['inputPhone'].click()
			},
			// ()=>{this.$refs['inputPhone'].click()}
			//图库选择
			openPhoto(e){
				// return
				let file = e.target.files[0]
				let reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = (ev)=>{
					let url = ev.target.result
					this.cropParams.src = url
					this.isShowImgCard=true
					this.$forceUpdate()
					this.$nextTick(()=>{
						document.getElementsByClassName('crop-whole-cover')[0].className  ='crop-whole-cover photoEMS'
						this.$refs.SimpleCrop._instance.$resetBtn.click()
						// document.getElementsByClassName('crop-btn')[0].click()
						// document.getElementsByClassName('crop-btn')[0]._instance.$resetBtn.click()
					})
				}
			},

			//选择摄像头
			changeCamera(){
				if(this.isphoto){
					return this.$toast.fail('请点击"知道了"关闭提醒框后操作!')
				}
				if(this.exact=='user'){
					this.exact = 'environment'
				}else{
					this.exact='user'
				}
				
				// this.$refs.SimpleCrop.hide()
				// if(this.options.field_id=='photo'){
				// 	this.isphoto=true
				// 	this.videoParam = {
				// 		audio: false,
				// 		video: {
				// 			facingMode: this.exact,
				// 			width:this.windowWidth,
				// 			height:this.windowHeight,
				// 		}
				// 	}
				// }
				// document.getElementsByClassName('vivwBox')[0].removeChild(this.cameraCanvas)
				this.closeCamera()
				this.cameraCanvas.remove()
				const cameraCanvas = document.createElement('canvas')
				this.cameraCanvas = cameraCanvas   //重设canvas 防止画布污染
				cameraCanvas.id = 'cameraCanvas'
				cameraCanvas.width = this.windowWidth * 4
				cameraCanvas.height = this.windowHeight * 4
				cameraCanvas.style = `display:none;height:${this.windowHeight};width:${this.windowWidth};`
				this.cameraCanvas2d = cameraCanvas.getContext('2d')
				this.openScan()
				// this.create()
			}
		},
		beforeDestroy(){this.closeCamera()},

		
		mounted(){
			// document.getElementsByClassName('crop-whole-cover')[0].className  ='crop-whole-cover photoEMS'
		}
	}
</script>
<style  lang="scss">
	.photoEMS>.crop-component .crop-btn:after{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		content: "";
		display: inline-block;
		background: none !important;
		content: '提交' !important;
		width: 30px !important;
		height: 20px !important;
		color: #fff !important;
	}
	
	// ::v-deep{
	// }
</style>
<style lang="scss" scoped>
	// page {
	// 	background-color: #333;
	// }
	.van-overlay{
		background: #fff;
	}
	.van-popup--center{
		top: 0;
		left: 0;
		transform: none !important;
	}
	.canvasBox {
		// position: relative;
		.vivwBox{
			position: relative;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			height:100%;
		}
		.shutterBox {
			position: absolute;
			transform: translateX(-50%);
			left: 50%;
			bottom: 10px;
			background-color: #166AFF;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 2px 4px 8px rgba(000, 000, 000, 0.3);
			z-index: 100;
			overflow: hidden;

			.shutter {
				color: #fff;
				font-size: 25px;
			}

			&.avtive::after {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background-color: rgba(000, 000, 000, 0.5);
			}
		}

		.trachBox {
			position: absolute;
			transform: translateX(-50%);
			left: 80%;
			bottom: 10px;
			width: 55px;
			height: 55px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100px;
			box-shadow: 2px 4px 8px rgba(000, 000, 000, 0.3);
			z-index: 30;
			font-size: 20px;
			.trach {
				width: 50px;
			}
		}
		.PhotoBox {
			background-color: rgba(216, 216, 216, 0.4);
			position: absolute;
			transform: translateX(-50%);
			left: 20%;
			bottom: 10px;
			width: 55px;
			height: 55px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100px;
			box-shadow: 2px 4px 8px rgba(000, 000, 000, 0.3);
			z-index: 30;
			font-size: 20px;
		}

	}
	
	.error {
		color: #f00;
		padding: 20px;
		padding-top:30px ;
		font-size: 22px;
		.on1 {
			color: #000;
			font-size: 18px;
		}
	}
	.el-icon-close{
		position: absolute;
		top: 8px;
		font-size: 26px;
		right: 13px;
		color: #f00;
		font-weight: 600;
		z-index: 99999999999999999999;
		display: flex;
    	align-items: center;
	}
	// .boxBorder{
	// 	width: 316px;

	// }
	.tipBox{
		position: absolute;
		bottom: -200px;
		padding:15px 12px ;
		background-color: #D8D8D8;
		font-size: 14px;
		p{
			line-height: 28px;
		}
		.on1{
			color: #D0021B;
			font-size: 16px;
		}
	}
	
</style>
